<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->
		<!-- 空白页 -->
		<view class="product-box com-box">
			<view v-if="!hasLogin || empty===true" class="empty">
				<image src="/static/emptyCart.png" mode="aspectFit"></image>
				<view v-if="hasLogin" class="empty-tips">
					空空如也
					<navigator class="navigator" url="/pages/index/index" open-type="switchTab">随便逛逛>
					</navigator>
				</view>
				<view v-else class="empty-tips">
					空空如也
					<view class="navigator" @click="navToLogin">去登陆></view>
				</view>
			</view>
			<view v-else>
				<!-- 列表 -->
				<view class="cart-list">
					<!-- #ifdef H5 -->
					<view class="pc">
						<view class="cart-total">
							<view class="ttl-item">全部商品 <text>4</text></view>
						</view>
						<view class="cart-title">
							<view class="ttl-item">商品标题</view>
							<view class="ttl-item">单价</view>
							<view class="ttl-item">规格</view>
							<view class="ttl-item">数量</view>
						</view>
					</view>
					<!-- #endif -->
					<block v-for="(item, index) in cartList" :key="item.id">
						<view class="cart-item">
							<view class="shop clamp sp">
								<image :src="item.goodsPicList[0]" mode="aspectFill"></image>
								{{item.sellerName}}
							</view>
							<view class="image-wrapper">
								<image :src="item.goodsPicList[0]" mode="aspectFill" lazy-load></image>
								<view class="icon icon-check_filled checkbox" :class="{checked: item.checked}" @click="check('item', index)"></view>
							</view>
							<view class="item-right">
								<text class="clamp2 title">{{item.goodsName}}</text>
								<view class="text">
									<text class="price">¥{{item.price}}</text>
									<text class="size">{{item.specification}}</text>
								</view>
								<view class="text">
									<text class="price">定金：¥{{item.price * item.depositRatio / 100}}</text>
								</view>

								<uni-number-box class="step" :min="1" :max="item.stock" :value="parseInt(item.buyCount)" :index="index"
								 @eventChange="numberChange"></uni-number-box>
							</view>
						</view>
					</block>
					<!-- 底部菜单栏 -->
					<view class="action-section">
						<view class="checkbox">
							<view class="icon icon-check_filled checkbox" :class="{checked: allChecked}" @click="check('all')"></view>
							<view class="clear-btn" @click="check('all')">
								全选
							</view>
						</view>
						<view class="total-box">
							<text class="price">¥{{total}}</text>
						</view>
						<button type="primary" class="no-border confirm-btn" @click="createOrder">购买</button>
						<button type="primary" class="no-border delete-btn" @click="deleteCartItem">删除</button>
					</view>
				</view>

			</view>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box.vue'
	import uniHeader from "@/components/h5/uni-header.vue"
	import uniFooter from "@/components/h5/uni-footer.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			uniNumberBox,
			uniHeader,
			uniFooter
		},
		data() {
			return {
				totalItems: 0, //总数量
				total: 0, //总价格
				allChecked: false, //全选状态  true|false
				empty: false, //空白页现实  true|false
				cartList: [],
				loadedItemIds: new Set(),
				isAuth: false,
				loading: true
			}
		},
		onLoad() {
			this.isAuth = this.$api.isAuth()
			this.loadData()
		},
		watch: {
			//显示空白页
			cartList(e) {
				let empty = e.length === 0 ? true : false
				if (this.empty !== empty) {
					this.empty = empty
				}
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			//请求数据
			loadData() {
				if (this.hasLogin) {
					this.$api.request('/shopcar/getShopcarList', {}, {
						method: 'GET',
						content: 'application/x-www-form-urlencoded	'
					}).then(res => {
						res.data.forEach(item => {
							item.checked = true
						})
						this.cartList = res.data
						this.calcTotal() //计算总价
					})
				}
			},
			navToLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			//选中状态处理
			check(type, index) {
				if (type === 'item') {
					this.cartList[index].checked = !this.cartList[index].checked
				} else {
					const checked = !this.allChecked
					const list = this.cartList
					list.forEach(item => {
						item.checked = checked
					})
					this.allChecked = checked
				}
				this.calcTotal(type)
			},
			//数量
			numberChange(data) {
				this.cartList[data.index].buyCount = data.number
				this.calcTotal()
				this.$api.request('/shopcar/countAddOrReduce', {
					id: this.cartList[data.index].id,
					num: data.number
				}, {
					content: 'application/x-www-form-urlencoded'
				}).then(res => {})
			},
			//删除
			deleteCartItem() {
				let ids = []
				let tempList = []
				this.cartList.forEach(item => {
					if (item.checked === true) {
						ids.push(item.id)
					} else {
						tempList.push(item)
					}
				})
				uni.showModal({
					title: '提示',
					content: '是否要删除订单记录?',
					success: (e) => {
						if (e.confirm) {
							this.$api.request('/shopcar/deleteShopCar', {
								id: ids
							}).then(res => {
								this.cartList = tempList
								this.calcTotal()
								//uni.hideLoading()
							})
						}
					}
				})
			},
			//计算总价
			calcTotal() {
				let list = this.cartList
				if (list.length === 0) {
					this.empty = true
					return
				}
				let total = 0
				let totalItems = 0
				let checked = true
				list.forEach(item => {
					if (item.checked === true) {
						totalItems += item.buyCount
						total += item.price * item.buyCount * item.depositRatio / 100
					} else if (checked === true) {
						checked = false
					}
				})
				this.allChecked = checked
				this.total = Number(total.toFixed(2));
				this.totalItems = totalItems
			},
			//创建订单
			createOrder() {
				//滤除未被选择的item
				let selectedItems = []
				this.cartList.forEach(item => {
					if (item.checked) {
						selectedItems.push(item)
					}
				})
				if (selectedItems.length === 0) {
					this.$api.msg('您没有选中任何商品')
					return
				}
				this.$api.globalData.goodsList = selectedItems
				uni.navigateTo({
					url: `/pages/order/create?takeway=cart`
				})
			}
		}
	}
</script>

<style lang='scss'>
	.container {
		padding-bottom: 134upx;
	}

	/* 空白页 */
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		image {
			width: 240upx;
			height: 160upx;
			margin-bottom: 30upx;
		}

		.empty-tips {
			display: flex;
			font-size: $base-font-sm + 2upx;
			color: $base-color-disabled;

			.navigator {
				color: $base-color-page;
				margin-left: 16upx;
			}
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.product-box {
			margin: 20px auto;
		}

		.container {
			padding-bottom: 0;
		}

		/* 空白页 */
		.empty {
			position: relative;
			left: auto;
			top: auto;
			padding: 100px 0;
			height: auto;
			background-color: #fff;

			image {
				width: 240px;
				height: 160px;
				margin-bottom: 30px;
			}

			.empty-tips {
				font-size: 16px;

				.navigator {
					margin-left: 16px;
				}
			}
		}
	}

	/* #endif */
</style>
